<template>
  <div class="Nav">
    <ul>
      <li>
        <img src="../assets/image/logo.png">
      </li>
      <li v-for="(item,index) in menulist" :key="index" @click="gomenus(item)">
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: {
    menulist: {
      type: Array
    }
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations(['setBreadcrumb']),
    gomenus(item) {
      let old_token = localStorage.getItem('TOKEN_KEY')
      if(old_token != null){
        if(item.breadcrumb !== null) {
          this.setBreadcrumb(item.breadcrumb.split(","))
        } 
        this.$router.push({ path: item.path })
      } else {
        localStorage.clear()
        this.$router.push('/login')
        window.location.reload();
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Nav {
  background-color: #1C1C1C;
  color: #fff;
  padding-bottom: 12px;
  ul {
    display: flex;
    li {
      font-size: 16px;
      width: 168px;
      height: 60px;
      line-height: 60px; 
      text-align: center;
      background-color: #1C1C1C;
      background: url(../assets/image/header_bg4.png) no-repeat center;
      background-size: 100% 100%;
      padding: 0 20px;
      cursor: pointer;
      margin-right: -17px;
      img {
        position: relative;
        top: 19px;
        width: 69%;
        height: 53%;
        left: 38px;
        display: block;
      }
    }
    li:first-child {
      width: 140px;
      z-index: 11;
      margin-right: -16px;
      background-color: unset;
      background: url(../assets/image/header_bg1.png) no-repeat center;
      background-size: 100% 106%;
    }
    li:nth-child(2) {
      z-index: 10;
      background-color: #0E6E25;
    }
    li:nth-child(3) {
      z-index: 9;
      background-color: #6F2861;
    }
    li:nth-child(4) {
      z-index: 8;
      background-color: #418F7C;
    }
    li:nth-child(5) {
      z-index: 7;
      background-color: #0E849E;
    }
    li:nth-child(6) {
      z-index: 6;
      background-color: #0E6E25;
    }
    li:nth-child(7) {
      z-index: 5;
      background-color: #6F2861;
    }
    li:nth-child(8) {
      z-index: 4;
      background-color: #418F7C;
    }
    li:nth-child(9) {
      z-index: 3;
      background-color: #0E849E;
    }
    li:nth-child(2),li:nth-child(6),li:nth-child(10) {
      background: url(../assets/image/header_bg2.png) no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(3),li:nth-child(7) {
      background: url(../assets/image/header_bg3.png) no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(4),li:nth-child(8) {
      background: url(../assets/image/header_bg4.png) no-repeat center;
      background-size: 100% 100%;
    }
    li:nth-child(5),li:nth-child(9) {
      background: url(../assets/image/header_bg5.png) no-repeat center;
      background-size: 100% 100%;
    }
  }
}

@media screen and (max-width: 1441px) {
  .Nav ul li{
    width: 110px;
  }
  .Nav ul li:first-child {
    width: 120px;
  }
}
</style>